<template>
	<view class="follower">
		<uni-search-bar @confirm="search" @cancel="cancelSearchHandle"></uni-search-bar>
		<view class="status_nav">粉丝({{count}})</view>
		<view class="follower_content" v-if="follower.data.length > 0">
			<view class="item" v-for="(avatar, index) in follower.data">
				<navigator :url="'../user/info?id=' + avatar.userId">
					<custom-avatar :item="{ ...avatar, type: 'normal' }"></custom-avatar>
					<view class="text">
						{{ avatar.nickName }}
						<view class="desc">{{ avatar.desc }}</view>
					</view>
				</navigator>
				<view class="handle"><custom-follow-button :item="avatar"></custom-follow-button></view>
			</view>
		</view>
		<view class="no_data" v-if="follower.data.length <= 0">暂无数据</view>
		<custom-gotop v-show="isShowGoTop"></custom-gotop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowGoTop: false,
			follower: {
				data: []
			},
			loading: false,
			pn: 0,
			newsId: '',
			count:0
		};
	},
	onLoad(ops) {
		this.newsId = ops.id;
		this.getFollowerCountData()
		this.getfollowerData(this.newsId);
	},
	onPullDownRefresh() {
		this.getFollowerCountData()
		this.getfollowerData(this.newsId).finally(() => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		let that = this;
		if (!this.loading) {
			this.loading = true;
			this.getfollowerData(this.newsId, this.pn + 1).finally(() => {
				that.pn += 1;
				that.loading = false;
			});
		}
	},
	onPageScroll(v) {
		if (v.scrollTop >= 200) {
			this.isShowGoTop = true;
		} else {
			this.isShowGoTop = false;
		}
	},
	methods: {
		cancelSearchHandle() {
			uni.startPullDownRefresh({});
		},
		search(v) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('searchFollowerAvatars', {
						k: v.value
					})
					.then(res => {
						that.follower.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getFollowerCountData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getFollowerCountData', {})
					.then(res => {
						that.count = res.data[0].count;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getfollowerData(id, pn, v) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getFollowerAvatarsData', {
						pn: pn || 0
					})
					.then(res => {
						that.follower.data = pn > 0 ? that.follower.data.concat(res.data) : res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		}
	}
};
</script>

<style lang="less">
.follower {
	.status_nav {
		padding: 20rpx;
		font-size: 28rpx;
		color: #999999;
		background-color: #fff;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	}
	.follower_content {
		margin: 0 20rpx 0 20rpx;
		.item {
			padding: 40rpx 20rpx;
			display: flex;
			align-items: center;
			navigator {
				flex: 1;
				display: flex;
				align-items: center;
				.text {
					font-size: 28rpx;
					margin: 0 0 0 10rpx;
					flex: 1;
					.desc {
						display: block;
						color: #999999;
					}
				}
			}
			.handle {
			}
		}
	}
	.no_data {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
	}
}
</style>
